<script setup>
// 预约表单数据
import { computed, reactive, ref, watch, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import axios from "axios";
import { takeAccessToken } from "@/api/login";
// import router from "@/router";
import {decodeJwtPayload} from "@/api/role";

const id = ref(null)
const recordDate = ref([])

onMounted(() => {
  getStuApp()
})

function getRole(){
  // 存储token的名字
  const authItemName = "access_token"
  // 取出token进行操作
  const authString = localStorage.getItem(authItemName) || sessionStorage.getItem(authItemName) || null
  // 使用JSON.parse方法将JSON字符串解析为JavaScript对象
  const authObj = JSON.parse(authString)
  // 解析值
  const authInfo = decodeJwtPayload(authObj.token)

  // console.log(authInfo.id)
  id.value = authInfo.id
}
getRole()

const reserForm = reactive({
  name: '',
  phone: '',
  date: '', // 日期
  time: '' // 时间
})

// 默认展示的信息
const placeDefault = ref('选择时间')

// 对日期进行限制
const disabledDate = (time) => {
  const yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1);
  const expire = new Date();
  expire.setDate(expire.getDate() + 7);
  // 可选范围为今天与后七天
  return time.getTime() < yesterday.getTime() || time.getTime() > expire.getTime();
}

// 生成小时选项数组（9-18点）
const hours = computed(() => {

  const now = new Date()
  // 格式化选择的日期
  const reserDate = new Date(reserForm.date)

  // 如果是同一天
  if(reserDate.getFullYear() === now.getFullYear()
      && reserDate.getMonth() === now.getMonth()
      && reserDate.getDate() === now.getDate()) {

    // 当前剩下可预约时间
    const nowHours = now.getHours()
    const start = Math.max(nowHours + 1, 9)
    const end = Math.min(nowHours + 9, 18)

    return Array.from({ length: end - start + 1 }, (_, index) => index + start)

  } else {
    // 如果不是同一天
    return Array.from({ length: 10 }, (_, index) => index + 9)
  }
})

// 观察 hours 的变化，并更新 placeDefault
watch(hours, (newHours) => {
  if (newHours.length !== 0) {
    placeDefault.value = '选择时间';
  } else {
    placeDefault.value = '暂无可选时间';
  }
})

// 格式化小时为两位数的字符串
function formatHour(hour) {
  return `${String(hour).padStart(2, '0')}:00`;
}

// 提交预约表单 -- 欠缺后端交互
function subForm() {
  // 判断是否输入
  if(reserForm.name === ''  || reserForm.phone === ''){
    ElMessageBox.alert('请输入姓名和电话', '警告信息', {
      confirmButtonText: '确认',
      callback: () => {}
    })
    return
  }

  // 判断是否选择日期和时间
  if(reserForm.date === '' || reserForm.date === null || reserForm.time === ''){
    ElMessageBox.alert('请选择日期时间', '警告信息', {
      confirmButtonText: '返回',
      callback: () => {}
    })
    return
  }

  submitForm()
}

// 判断是否已经有这个时间段的预约信息了
function getStuApp(){
  // 从后端请求数据 -- 学生端 根据stuid来 获取数据 -- 校医端根据日期来获取数据 -- 管理员端则显示全部
  axios.get('api/appoint/lists',{
    headers: {
      'Authorization': `Bearer ${takeAccessToken()}`
    }
  })
      .then((res) => {
        // console.log(res, '含id')
        recordDate.value = [...res.data.data]
        // console.log(recordDate.value[1].apptime)
        // console.log(recordDate.value[0].appid)
      })
      .catch((err) => {
        console.log(err)
      })
}

// 最后提交的函数
function submitForm() {
  // console.log(recordDate.value[1].apptime)
  // 从 Date 对象中提取年、月、日
  const year = reserForm.date.getFullYear();
  const month = String(reserForm.date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的，所以需要加 1
  const day = String(reserForm.date.getDate()).padStart(2, '0');

  // 确保 reserForm.time 至少包含小时和分钟，并补全为 HH:mm:ss 格式
  let timeParts = [reserForm.time, '00', '00'];

  // 拼接时间部分
  const formattedTime = timeParts.join(':');

  // 拼接完整的日期时间字符串
  const formattedDateTime = `${year}-${month}-${day} ${formattedTime}`;

  let flag = true

  for (const res of recordDate.value) {
    // console.log('进入逻辑');
    // console.log(formattedDateTime);
    // console.log(res.apptime);
    if (formattedDateTime === res.apptime) {
      ElMessage.warning('该时间段已预约');
      flag = false
      break; // 使用 break 退出循环
    }
  }

  // 如果不通过检验，返回
  if(!flag){
    return
  }

  // console.log(formattedDateTime); // 输出应该是 2024-04-23 10:00:00

  axios.post('/api/appoint/add', {
    apptime: formattedDateTime
  }, {
    headers:{
      Authorization: `Bearer ${takeAccessToken()}`,
      "Content-Type": 'multipart/form-data'
    }
  })
  .then((res) => {
    // console.log(res)
    if(res.data.code === 200){
      // 成功操作 -- 提交后端
      ElMessageBox.alert(`${reserForm.name}同学，预约成功！请在${reserForm.date.getFullYear()}年${reserForm.date.getMonth()}月${reserForm.date.getDate()}日
    ${ reserForm.time }-${ reserForm.time + 1 }点前往校医室就医！`, '提示信息', {
        confirmButtonText: '确定',
        callback: () => {}
      })
      resetReserForm()
      // router.push({name: 'record'})
    } else {
      ElMessage.warning(res.data.message)
    }
  })
  .catch((err) => {
    console.log(err)
  })
}

// 重置表单
function resetReserForm() {
  reserForm.name = '';   // 清空姓名
  reserForm.phone = '';  // 清空电话
  reserForm.date = '';   // 清空日期
  reserForm.time = '';   // 清空时间
}
</script>

<template>
  <el-card class="box-card">
    <el-form :model="reserForm" label-width="120px">

      <el-form-item label="姓名">
        <el-input v-model="reserForm.name"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="reserForm.phone" maxlength="11"></el-input>
      </el-form-item>

      <!-- 时间的选择 -->
      <el-form-item label="预约时间">
        <el-date-picker
            v-model="reserForm.date"
            type="date"
            placeholder="选择日期"
            :disabled-date="disabledDate"
        ></el-date-picker>

        <el-select
            v-model="reserForm.time"
            :placeholder="placeDefault"
            :disabled="hours.length === 0"
            style="margin-left: 10px;width: 220px;">
          <template #prefix>
            <el-icon name="edit"></el-icon>
          </template>
          <el-option
              v-for="hour in hours"
              :key="hour"
              :label="formatHour(hour)"
              :value="hour">
          </el-option>
        </el-select>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="subForm">提交</el-button>
      </el-form-item>

    </el-form>
  </el-card>
</template>

<style scoped>

</style>